<template>
  <div>
    <ParticlesBg type="ball" :config="particlesConfig" :bg="true"/>
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
        <div class="loginTile">欢迎登陆</div>
        <el-form ref="loginRefForm" :model="user" label-width="auto" style="max-width: 300px" :rules="loginRules">

          <el-form-item label="账号" prop="username">
            <el-input v-model="user.username"/>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password"/>
          </el-form-item>

          <el-form-item style="text-align: center">
            <el-button type="primary" class="transparent-button" plain @click="login()">登录</el-button>
            <el-button type="primary" class="transparent-button" plain @click="register()">注册</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import {defineComponent} from 'vue'
import {doPost} from "../http/HttpRequest.js";
import {ParticlesBg} from 'particles-bg-vue';
import router from "@/router/router";

export default defineComponent({
  name: "LoginView",
  components: {
    ParticlesBg
  },
  data() {
    return {
      particlesConfig: {
        // 插件配置参数
        // 可根据需求进行设置
        // 例如：type、num等
        num: [4, 7],
        rps: 0.5,
        radius: [5, 20],
        life: [1.5, 3],
        v: [0.5, 1],
        tha: [-40, 40],
        alpha: [0.6, 0],
        scale: [1, 0.1],
        position: 'center',
        color: ['random', '#ff0000'],
        cross: 'cross ',
        random: 100,
        g: 100,
      },
      //定义对象form
      user: {
        username: "",
        password: "",
        // jwtToken:localStorage.getItem('jwtToken'),
      },
      name: '',
      loginRules: {
        //定义账号的验证规则，规则有多个，所以用数组
        loginAct: [
          {required: true, message: '请输入账号', trigger: 'blur'}, //blur表示光标离开时触发
        ],
        //定义密码的验证规则，规则有多个，所以用数组
        loginPwd: [
          {required: true, message: '请输入密码', trigger: 'blur'}, //blur表示光标离开时触发
          {min: 6, max: 16, message: '密码长度为6-16位', trigger: 'blur'},
        ]
      },
    }
  },

  methods: {
    login() {
      doPost("/api/v1/login/check", JSON.stringify(this.user)).then(resp => {
        // eslint-disable-next-line
        if (resp.data.code === "0000") {
          // 1. 获取后端响应中的 JWT token
          const jwtToken = resp.data.data.jwtToken;
          console.log(jwtToken);

          // 将jwtToken存储到localStorage中
          localStorage.setItem('jwtToken', jwtToken);
          // 获取用户名
          const username = resp.data.data.username;
          //重定向到另一个工程的页面
          // window.location.href = '/home';
          router.push({ name: 'home', params: { username } });
        } else {
          // 登录失败，显示错误消息或其他逻辑
          console.error('登录失败', resp.data.message); // 假设服务器返回了错误信息
        }
      })
    },
    register() {
      window.location.href = '/register';
    }
  }
})
</script>

<style>
.el-aside {
  width: 70%;
  margin-left: -100px;
  text-align: center;
}

.el-main {
  height: calc(97vh);
}

img {
  width: 800px;
  height: 89%;
}

.el-form {
  width: 88%;
  margin: auto;
}

.loginTile {
  text-align: center;
  margin-top: 200px;
  margin-bottom: 15px;
  font-weight: bold;
}

.el-button {
  width: 30%;
}

.transparent-button {
  margin: auto;
  text-align: center; /* 如果需要按钮内部文字水平居中 */
  background-color: rgba(0, 0, 0, 0); /* 将背景色设置为完全透明 */
  /* 可以根据需要设置其他样式 */
  color: rgb(2, 2, 28);
}

</style>
